import React from 'react';
import { Card, List } from 'antd';
import { CrownFilled, TeamOutlined, FireFilled } from '@ant-design/icons';

interface TopGroup {
    id: number | null;
    name: string;
    value: number;
}

interface TopGroupsListProps {
    loading: boolean;
    title: string;
    icon: React.ReactNode;
    dataSource: TopGroup[];
    valueSuffix: string;
}

const TopGroupsList: React.FC<TopGroupsListProps> = ({
                                                         loading,
                                                         title,
                                                         icon,
                                                         dataSource,
                                                         valueSuffix
                                                     }) => {
    return (
        <Card
            title={
                <span>
                    {icon}
                    {title}
                </span>
            }
            loading={loading}
        >
            <List
                dataSource={dataSource}
                renderItem={(item, index) => (
                    <List.Item>
                        <List.Item.Meta
                            avatar={<span style={{ fontSize: '16px', fontWeight: 'bold' }}>{index + 1}</span>}
                            title={item.name}
                            description={`${valueSuffix}: ${item.value}`}
                        />
                    </List.Item>
                )}
            />
        </Card>
    );
};

export default TopGroupsList;